<script setup lang="ts">
import Write from './Write.vue'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { ref, unref } from 'vue'
import { createApi } from '@/api/system/staff'
import { ElMessage } from 'element-plus'
const emit = defineEmits(['close', 'get-list'])
const writeRef = ref<ComponentRef<typeof Write>>()

const loading = ref(false)

const save = async () => {
  const write = unref(writeRef)
  const formData = await write?.submit()
  if (formData) {
    loading.value = true
    const res = await createApi(formData)
      .catch(() => {})
      .finally(() => {
        loading.value = false
      })
    if (res) {
      ElMessage.success(res.msg)
      write?.reset()
      emit('close')
      emit('get-list')
    }
  }
}
</script>

<template>
  <ContentDetailWrap title="账号分配角色">
    <Write ref="writeRef" />

    <template #footer>
      <div class="w-full flex items-center justify-center">
        <BaseButton type="primary" :loading="loading" @click="save">保存</BaseButton>
        <BaseButton @click="emit('close')">取消</BaseButton>
      </div>
    </template>
  </ContentDetailWrap>
</template>
